import { useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import { Input, Radio } from 'antd'
import InputSelect from '../inputs/InputSelect'

const SearchFilter = ({
  field,
  label,
  queryValues,
  onChangeQueryValues,
  ...props
}) => {
  const [searchWord, setSearchWord] = useState('')

  useEffect(() => {
    setSearchWord(queryValues[field])
  }, [queryValues])

  return <Input.Search
    enterButton
    placeholder={`根据${label}搜索`}
    value={searchWord}
    onChange={e => {
      setSearchWord(e.target.value)
    }}
    onSearch={(value) => {
      onChangeQueryValues({
        [field]: value
      })
    }}
    allowClear
    {...props}
  ></Input.Search>
}

SearchFilter.propTypes = {
  field: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  queryValues: PropTypes.object.isRequired,
  onChangeQueryValues: PropTypes.func.isRequired,
}


const SelectFilter = ({
  field,
  label,
  queryValues,
  onChangeQueryValues,
  ...props
}) => {
  return <>
    <span style={{ color: '#999', marginLeft: 10 }}>{label}：</span>
    <InputSelect
      value={queryValues[field]}
      onChange={(value) => {
        console.log(value)
        onChangeQueryValues({
          [field]: value
        })
      }}
      allowClear
      style={{ width: 220 }}
      placeholder={`请选择${label}`}
      {...props}
    ></InputSelect>
  </>
}

SelectFilter.propTypes = {
  field: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  queryValues: PropTypes.object.isRequired,
  onChangeQueryValues: PropTypes.func.isRequired,
}

const RadioFilter = ({
  field,
  label,
  queryValues,
  onChangeQueryValues,
  ...props
}) => {
  return <>
    <span style={{ color: '#999', marginLeft: 10 }}>{label}：</span>
    <Radio.Group
      value={queryValues[field]}
      onChange={e => {
        onChangeQueryValues({
          [field]: e.target.value
        })
      }}
      optionType="button"
      buttonStyle="solid"
      {...props}
    ></Radio.Group>
  </>
}

RadioFilter.propTypes = {
  field: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  queryValues: PropTypes.object.isRequired,
  onChangeQueryValues: PropTypes.func.isRequired,
}

const CommonFilterItem = {
  Search: SearchFilter,
  Select: SelectFilter,
  Radio: RadioFilter
}

export default CommonFilterItem
